<template>


  <SearchTablePage ref="searchTableRef" :search-config="baseTableSearchModel" :table-config="baseTableModel" />

</template>

<script lang="tsx" setup>
defineOptions({
  name: 'StoreInfoDetailPageData',   //全局别名
  title: '表格页',   //标题
});
import StoreInfoApi from '~/src/api/webPath/StoreInfoApi';
// 接口
import StoreInfoDetailApi from '/@/api/webPath/StoreInfoDetailApi.ts';

import { useTemplateName } from '~/src/utils/useTemplateName';
import FORM_FIELD_TYPE from '/@/constants/FormFieldType';
import VDialog from '/@/utils/dialogUtil.ts'
import dayjs from 'dayjs';
import { useUserName } from '~/src/utils/useUserName';

const router = useRouter();
const baseTable = ref(null as any);
const baseTableSearch = ref(null as any);
const editRef = ref<any>(null);
const searchTableRef = useTemplateRef("searchTableRef")
const userName = useUserName()


const storeType = ref()
const exportXlsName = useTemplateName("template_type_8")
const storeList = ref()
onMounted(async () => {
  // TODO 更换为全量获取仓库列表
  const data = (await StoreInfoApi.getPageData({})).data
  console.log("data:", data)
  storeList.value = data.records.map(item => ({ label: item.storeName, value: +item.id }))
  console.log("supplierTypeList", storeList.value)
  // data.map(x=>{label:data})
})
// 表格搜索初始化searchModel
const baseTableSearchModel = ref({
  columnCount: 4,
  expandLimit: 6,
  autoFit: true,
  columnWidth: '330px',
  labelPosition: 'right',
  labelWidth: '100px',
  items: [ //搜索项初始化
    {
      label: "仓库",
      field: "storeId",
      clearable: true,
      type: FORM_FIELD_TYPE.SINGLE_LAYER_SELECT,
      options: storeList,
      placeholder: "请输入",

    },

    {
      label: "物料编号",
      field: "materialCode",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,
      placeholder: "请输入",

    },

    {
      label: "物料名称",
      field: "materialName",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,
      placeholder: "请输入",

    },

    {
      label: "物料规格",
      field: "materialSpc",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,
      placeholder: "请输入",

    },

    {
      label: "物料类别",
      field: "smallCategory",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,
      placeholder: "请输入",

    },

  ],

  buttons: [    //功能区域
    // {
    //   name: "库存导出",
    //   buttonClass: 'primary',
    //   width: 100,
    //   click: ({ row, handlers }) => {   //暴露的方法钩子
    //     StoreInfoDetailApi.pageDataXls(handlers.getRequestParams(), handlers.getXlsTitle(), exportXlsName.value)
    //   }
    // },
    {
      name: "库存导出",
      buttonClass: 'primary',
      width: 100,
      click: ({ row, handlers }) => {        // 点击回调事件方法钩子，  点击触发

        VDialog.open({
          title: '库存导出',

          content: { //内容初始形式
            type: 'component', //text:"",预留文本
            name: '/storeInfoDetail/daochu',
            query: {},

          },

          callBack: (data: any) => {
            storeType.value = data.supplierType;
            StoreInfoDetailApi.pageDataXls(handlers.getRequestParams(), handlers.getXlsTitle(), exportXlsName.value, storeType.value)
            handlers.refresh()
          },
          onClose: () => {
            console.log("对话框已关闭");
          },
        });

      },
    },

    {
      name: "单个入库",
      buttonClass: 'primary',   //按钮颜色控制
      buttonType: 'text',      // 按钮风格   text  link  button
      click: ({ row, index, handlers }) => {        // 点击回调事件方法钩子，  点击触发

        VDialog.open({
          title: '入库',
          content: { //内容初始形式
            type: 'component', //text:"",预留文本
            name: '/storeInfoDetail/edit',
            query: { type: "in" },
            fullscreen: true,
          },

          callBack: (data: any) => {
            handlers.refresh()
          },
          onClose: () => {
            console.log("对话框已关闭");
          },
        });
      },
    },
    {
      name: "批量入库",
      buttonClass: 'primary',
      width: 100,
      click: ({ row, handlers }) => {   //暴露的方法钩子
        //  CompanyInfoApi.pageDataXls( handlers.getRequestParams(),handlers.getXlsTitle())
        VDialog.open({
          title: '入库数据导入',
          content: { //内容初始形式
            type: 'component', //text:"",预留文本
            name: '/AttachmentUpload',
            // query: { companyInfoId: row.id },
          },
          config: {
            doUpload: StoreInfoDetailApi.inStoreExcelImoprt,
            doBatchSave: StoreInfoDetailApi.batchSave,
            templateType: "template_type_8"
          },
          callBack: (data: any) => {
            handlers.refresh()
            console.log("refresh", handlers.refresh)
            // handlers.refresh()
            console.log("upload recived data:", data)
          },
          onClose: () => {
            console.log("对话框已关闭");
          },
        })
      }
    },
    {
      name: "出库",
      buttonClass: 'primary',
      width: 100,
      click: ({ row, handlers }) => {   //暴露的方法钩子
        const selections = searchTableRef.value.getTableRef().getSelection()
        const data = selections.map(x => ({ ...x, stockNum: x.num }))
        //  CompanyInfoApi.pageDataXls( handlers.getRequestParams(),handlers.getXlsTitle())
        VDialog.open({
          title: '批量出库',
          content: { //内容初始形式
            type: 'component', //text:"",预留文本
            name: '/storeInfoDetail/tableOut',
            // query: { companyInfoId: row.id },
            fullscreen: true,
          },
          config: {
            modelData: {
              data,
              columns: [
                {
                  label: "仓库",
                  field: "storeName",
                  type: "readonly"
                },
                {
                  label: "供应商",
                  field: "supplierName",
                  width: '280px',
                  type: "readonly"
                },
                {
                  label: "供应商类型",
                  field: "supplierType",
                  type: "readonly"
                },
                {
                  label: "物料编号",
                  field: "materialCode",
                  type: "readonly"
                },
                {
                  label: "物料名称",
                  field: "materialName",
                  type: "readonly"
                },
                {
                  label: "领用日期",
                  field: "enterDate",
                  defaultValue: dayjs().format("YYYY-MM-DD"),
                  type: "date"
                },
                {
                  label: "制作食品量",
                  field: "foodProductionNum",
                  rule: [
                    {
                      required: true,
                      message: "请输入制作食品量"
                    }
                  ],
                  defaultValue: (row: any) => {
                    console.log("row", row)
                    if (row["storeName"] === '食品添加剂库') {
                      return ''
                    } else {
                      return '/'
                    }
                  },
                  type: "input"
                },
                {
                  label: "领用人",
                  field: "recipient",
                  defaultValue: userName.value,
                  rule: [
                    {
                      required: true,
                      message: "请输入领用人"
                    }
                  ],
                },
                {
                  label: "库存数量",
                  field: "stockNum",
                  type: "readonly",
                  rule: [
                    {
                      required: true,
                      message: "请输入出库数量"
                    }
                  ]
                },
                {
                  label: "出库数量",
                  field: "num",
                  defaultValue: 0,
                  rule: [
                    {
                      required: true,
                      message: "请输入出库数量"
                    }
                  ]
                },
              ]
            }
          },
          callBack: (data: any) => {
            handlers.refresh()
            console.log("refresh", handlers.refresh)
            // handlers.refresh()
            console.log("upload recived data:", data)
            const list = data.map(x => ({
              enterDate: x.enterDate,
              materialCode: x.materialCode,
              materialName: x.materialName,
              num: x.num,
              recipient: x.recipient,
              storeInfoName: x.storeName,
              supplierName: x.supplierName,
              supplierTypeName: x.supplierType
            }))
            StoreInfoDetailApi.batchOut({ list }).then(res => {
              if (res) {
                const { message } = res
                $baseMessage(message, "success")
              }
            })
          },
          onClose: () => {
            console.log("对话框已关闭");
          },
        })
      }
    },
    {
      name: "批量删除",
      buttonClass: 'danger',
      width: 100,
      isShow: (row: any) => {
        return false;
      },
      click: () => {   //暴露的方法钩子
        console.log(baseTable.value.getSelection());
      },
    },
  ]
})
// 表格初始化Model
const baseTableModel = ref({
  border: true,
  pagination: true,
  inline: true,
  selectable: true,
  isFullscreen: false,
  tooltip: true,
  minWidth: '200px',
  actionWidth: '400px',
  actionLimit: 5,
  data: {    //table  初始化
    current: 1,
    size: 10,
    total: 100,
    data: []
  },
  requestData: { api: StoreInfoDetailApi.getPageData, query: {} },   //数据源 参数有效性： 'steady|transient'
  columns: [
    //  {
    //   label: "id",
    //   field: "id",
    //   width:100,
    //     },
    // {
    //   label: "排序",
    //   field: "sort",
    //   width: 180,
    // },
    {
      label: "仓库",
      field: "storeName",
      // render({ row }) {
      //   console.log('row', row)
      //   console.log("storeList", storeList.value)
      //   const store = storeList.value.find(x => {
      //     console.log("x value", x.value, "storeId", row["storeId"])
      //     return x.value === row["storeId"]
      //   })
      //   console.log("store", store)
      //   return <span>{store["label"]}</span>
      // },
      width: 180,
    },
    {
      label: "物料编号",
      field: "materialCode",
      width: 180,
      // noExported: true,
    },
    {
      label: "供应商名称",
      field: "supplierName",
      width: 180,
    },
    {
      label: "供应商类型",
      field: "supplierType",
      width: 180,
    },
    // {
    //   label: "入库日期",
    //   field: "smallCategory",
    //   width: 200,
    //   fieldFormat: "date"
    // },
    {
      label: "物料名称",
      field: "materialName",
      width: 180,
    },
    {
      label: "物料规格",
      field: "materialSpc",
      width: 180,
    },
    // {
    //   label: "入库数量",
    //   field: "largeCategory",
    //   width: 180,
    // },
    // {
    //   label: "中类",
    //   field: "middleCategory",
    //   width: 180,
    // },
    // {
    //   label: "生产日期",
    //   field: "reserveOne",
    //   width: 180,
    // },
    // {
    //   label: "保质期",
    //   field: "reserveTwo",
    //   width: 180,
    // },
    // {
    //   label: "供应商名称",
    //   field: "reserveThree",
    //   width: 180,
    // },
    // {
    //   label: "仓库名称",
    //   field: "reserveFour",
    //   width: 180,
    // },
    {
      label: "存储条件",
      field: "storageCondition",
      width: 180,
      noExported: true,
    },
    {
      label: "存储地点",
      field: "storagePlace",
      width: 180,
      noExported: true,
    },
    {
      label: "物料类别",
      field: "smallCategory",
      width: 180,
    },
    {
      label: "检测项目",
      field: "testItems",
      width: 180,
      noExported: true,
    },

    {
      label: "库存数量",
      field: "num",
      width: 120,
      // noExported: true,
    },
    // {
    //   label: "第三方检测报告中样品名称",
    //   field: "smallCategory",
    //   width: 180,
    // },
    // {
    //   label: "第三方检测报告日期",
    //   field: "smallCategory",
    //   width: 180,
    // },
    {
      label: "创建时间",
      field: "create_time",
      width: 200,
    },
    {
      label: "更新时间",
      field: "update_time",
      width: 200,
    },
  ],


  actions: [
    // {
    //   name: "检测报告",

    //   buttonClass: 'primary',
    //   buttonType: 'text',
    //   click: ({ row, index, handlers }) => {

    //     //router.push({name: 'CompanyInfoDetail',})
    //     VDialog.open({
    //       title: '检测报告',
    //       content: { //内容初始形式
    //         type: 'component', //text:"",预留文本
    //         name: '/storeInfoDetail/testReport',
    //         query: { materialCode: row.materialCode },
    //       },
    //       callBack: (data: any) => {
    //         handlers.refresh()
    //       },
    //       onClose: () => {
    //         console.log("对话框已关闭");
    //       },
    //     });
    //   },
    //   isShow: (row: object) => {
    //     return true;
    //   },
    //   fixed: 'right'
    // },

    {
      name: "详情",
      buttonClass: 'primary',
      buttonType: 'text',
      click: ({ row, index, handlers }) => {
        //router.push({name: 'CompanyInfoDetail',})
        VDialog.open({
          title: '详情',
          content: { //内容初始形式
            type: 'component', //text:"",预留文本
            name: '/storeInfoDetail/detail',
            query: { storeInfoDetailId: row.id },

          },
          callBack: (data: any) => {
            handlers.refresh()
          },
          onClose: () => {
            console.log("对话框已关闭");
          },
        });
      },
      isShow: (row: object) => {
        return true;
      },
      fixed: 'right'
    },
    {
      name: "编辑",
      buttonClass: 'primary',   //按钮颜色控制
      buttonType: 'text',      // 按钮风格   text  link  button
      isShow: (row: object) => {  //根据业务做动态隐藏张氏
        return true
      },
      click: ({ row, index, handlers }) => {        // 点击回调事件方法钩子，  点击触发
        VDialog.open({
          title: '编辑',
          content: { //内容初始形式
            type: 'component', //text:"",预留文本
            name: '/storeInfoDetail/edit',
            query: { storeInfoDetailId: row.id },
          },
          callBack: (data: any) => {
            handlers.refresh()
          },
          onClose: () => {
            console.log("对话框已关闭");
          },
        });
      },
      fixed: 'right'
    },
    {
      name: "入库记录",
      buttonClass: 'primary',   //按钮颜色控制
      buttonType: 'text',      // 按钮风格   text  link  button
      isShow: (row: object) => {  //根据业务做动态隐藏张氏
        return true
      },


      click: ({ row, index, handlers }) => {
        console.log('storeId: ', row.storeId);
        console.log('materialName: ', row.materialName);      // 点击回调事件方法钩子，  点击触发
        VDialog.open({
          title: '入库记录',
          content: { //内容初始形式
            type: 'component', //text:"",预留文本
            name: '/storeInfoDetail/purchaseGoods',
            query: { storeId: row.storeId, materialName: row.materialName },
            fullscreen: true,
          },
          callBack: (data: any) => {
            handlers.refresh()
          },
          onClose: () => {
            console.log("对话框已关闭");
          },
        });
      },
      fixed: 'right'
    },
    {
      name: "领用记录",
      buttonClass: 'primary',   //按钮颜色控制
      buttonType: 'text',      // 按钮风格   text  link  button
      isShow: (row: object) => {  //根据业务做动态隐藏张氏
        return true
      },
      click: ({ row, index, handlers }) => {        // 点击回调事件方法钩子，  点击触发
        VDialog.open({
          title: '领用记录',
          content: { //内容初始形式
            type: 'component', //text:"",预留文本
            name: '/storeInfoDetail/usageRecord',
            query: { storeId: row.storeId, materialName: row.materialName },
            fullscreen: true,
          },
          callBack: (data: any) => {
            handlers.refresh()
          },
          onClose: () => {
            console.log("对话框已关闭");
          },
        });
      },
      fixed: 'right'
    },
    // {
    //   name: "便捷出库",
    //   buttonClass: 'primary',   //按钮颜色控制
    //   buttonType: 'text',      // 按钮风格   text  link  button
    //   isShow: (row: object) => {  //根据业务做动态隐藏张氏
    //     return true
    //   },
    //   click: ({ row, index, handlers }) => {        // 点击回调事件方法钩子，  点击触发
    //     VDialog.open({
    //       title: '出库',
    //       content: { //内容初始形式
    //         type: 'component', //text:"",预留文本
    //         name: '/storeInfoDetail/edit',
    //         query: { storeInfoDetailId: row.id, type: "out", batchNo: row.batchNo },
    //       },
    //       callBack: (data: any) => {
    //         handlers.refresh()
    //       },
    //       onClose: () => {
    //         console.log("对话框已关闭");
    //       },
    //     });
    //   },
    //   fixed: 'right'
    // },
    // {
    //   name: "便捷入库",
    //   buttonClass: 'primary',   //按钮颜色控制
    //   buttonType: 'text',      // 按钮风格   text  link  button
    //   isShow: (row: object) => {  //根据业务做动态隐藏张氏
    //     return true
    //   },
    //   click: ({ row, index, handlers }) => {        // 点击回调事件方法钩子，  点击触发
    //     VDialog.open({
    //       title: '入库',
    //       content: { //内容初始形式
    //         type: 'component', //text:"",预留文本
    //         name: '/storeInfoDetail/edit',
    //         query: { storeInfoDetailId: row.id, type: "in", batchNo: row.batchNo },
    //       },
    //       callBack: (data: any) => {
    //         handlers.refresh()
    //       },
    //       onClose: () => {
    //         console.log("对话框已关闭");
    //       },
    //     });
    //   },
    //   fixed: 'right'
    // },
    {
      name: "删除",
      buttonClass: 'danger',
      buttonType: 'text',
      fixed: 'right',
      click: ({ row, index, handlers }) => {
        $baseConfirm('您确定要删除当前项吗', null, async () => {
          const { message } = await StoreInfoDetailApi.del({ storeInfoDetailIds: row.id })
          $baseMessage(message, 'success', 'vab-hey-message-success');
          handlers.refresh()
        })
      }
    },
  ]

})



onActivated(() => {
})



</script>
